<template>
  <div class="miana">
    <!--  选项 -->
    <div class="grid">
      <!--  刷新 -->

      <el-button @click="reset">刷新</el-button>
      <el-checkbox-group @change="reset" v-model="checkboxGroup1">
        <el-checkbox-button
          v-for="city in cities"
          :label="city.value"
          :key="city.value"
          >{{ city.name }}</el-checkbox-button
        >
      </el-checkbox-group>
      <div style="display: flex">
        <el-input @change="reset" v-model="keyword"></el-input>
        <el-button
          @click="
            () => {
              (this.page = 1), render();
            }
          "
          >搜索</el-button
        >
      </div>
    </div>
    <el-table
      size="mini"
      max-height="600"
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div style="display: grid; grid-template-columns: 1fr 1fr">
            <el-form label-position="right" label-width="200px">
              <el-form-item label="聊天记录">
                <el-image
                  v-for="item in scope.row.Items.filter((v) => v.type == 0)"
                  :key="item.id"
                  style="width: 100px; height: 100px"
                  :src="item.link"
                  :preview-src-list="
                    scope.row.Items.filter((v) => v.type == 0).map(
                      (v) => v.link
                    )
                  "
                >
                </el-image>
              </el-form-item>
              <el-form-item label="附件">
                <a
                  v-for="item in scope.row.Items.filter((v) => v.type == 1)"
                  :key="item.id"
                  :href="item.link"
                >
                  <el-button type="primary" icon="el-icon-share"
                    >下载附件</el-button
                  >
                </a>
              </el-form-item>
            </el-form>
            <el-form>
              <el-form-item label="收款码">
                <el-image
                  v-if="scope.row.userinfo"
                  style="width: 100px; height: 100px"
                  :src="scope.row.userinfo[0].payimg"
                  :preview-src-list="[scope.row.userinfo[0].payimg]"
                >
                </el-image>
              </el-form-item>
            </el-form>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="150"> </el-table-column>
      <el-table-column prop="orderSn" label="订单编号" width="120">
      </el-table-column>

      <el-table-column prop="price" label="佣金" width="120">
        <template slot-scope="scope">
          <div>{{ scope.row.price / 100 }} 元</div>
        </template>
      </el-table-column>
      <el-table-column prop="userid" label="接单人" width="120">
        <template slot-scope="scope">
          <div
            v-if="scope.row?.userinfo"
            style="
              display: flex;
              align-items: center;
              justify-content: space-around;
            "
          >
            <img
              style="border-radius: 50%"
              width="30"
              height="30"
              :src="scope.row.userinfo[0].avatar"
              alt=""
            />
            <div>{{ scope.row.userinfo[0].name }}</div>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="状态" width="120">
        <template slot-scope="scope">
          <div>
            <el-tag v-show="scope.row.status == 1" type="success" effect="dark">
              未完成
            </el-tag>
            <el-tag v-show="scope.row.status == 2" type="danger" effect="dark">
              完成
            </el-tag>
            <el-tag v-show="scope.row.status == 3" type="danger" effect="dark">
              打款申请中
            </el-tag>
            <el-tag v-show="scope.row.status == 4" type="danger" effect="dark">
              已打款
            </el-tag>
            <el-tag v-show="scope.row.status == 7" type="danger" effect="dark">
              失败
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间">
        <template slot-scope="scope">
          <div>
            {{ scope.row.updateTime | formatTime }}
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <div>
            <el-button
              @click="successfn(scope.row.id)"
              v-show="scope.row.status == 1"
              >完成</el-button
            >
            <el-button
              v-show="scope.row.status == 1"
              @click="myselftranslatefn(scope.row.id, scope.$index)"
              >转单</el-button
            >
            <el-button
              v-show="scope.row.status == 1"
              @click="changetstatus(scope.row.id, 7, scope.$index)"
              >闭单</el-button
            >
            <el-button
              @click="changetstatus(scope.row.id, 3, scope.$index)"
              v-show="scope.row.status == 2"
              >申请打款</el-button
            >
            <el-button
              @click="dakuan(scope.row.id, scope.$index)"
              v-show="scope.row.status == 3"
              >打款</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="page"
      @current-change="fn"
      background
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        <el-upload
          :headers="headers"
          class="avatar-uploader"
          action="/api/systemfile2"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="url" :src="url" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toeiitorder">确 定</el-button>
      </span>
    </el-dialog>

    <el-drawer
      class="box"
      :modal="false"
      :destroy-on-close="true"
      :modal-append-to-body="false"
      size="100%"
      title="完成订单"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <div>
        <!--  聊天图片  -->
        <mdupload @chose="chose" :orderid="orderid"></mdupload>
        <!-- 作品源文件 psd  -->
      </div>
    </el-drawer>

    <!-- <mdupload></mdupload> -->
  </div>
</template>

<script>
import {
  Orderlist,
  myselstatus,
  myselftranslate,
  orderpay,
} from '../../api/order';
import mdupload from './components/mdupload';

export default {
  name: 'list',
  data() {
    return {
      headers: {
        Authorization: localStorage.getItem('token'),
      },
      url: '',
      dialogVisible: false,
      orderid: 0,
      drawer: false,
      direction: 'rtl',
      loading: true,
      total: 30,
      tableData: [],
      keyword: '',
      page: 1,
      size: 10,
      checkboxGroup1: [],
      cities: [
        { name: '未完成', value: 1 },
        { name: '完成', value: 2 },
        { name: '申请打款', value: 3 },
        { name: '关单', value: 7 },
      ],
    };
  },
  components: {
    mdupload,
  },
  methods: {
    async toeiitorder() {
      console.log(this.orderid);
      console.log(this.url);
      // 发生请求 更新订单 更改状态
      if (!this.url) {
        // 没有文件不让上传
        return;
      }
      let result = await orderpay({ orderid: this.orderid, url: this.url });
      if (result.code == 2000) {
        this.dialogVisible = false;
      }
    },
    handleAvatarSuccess(res, file) {
      this.url = res.data.url;
      //   this.imageUrl = URL.createObjectURL(file.raw);
    },
    dakuan(val, index) {
      console.log(val);
      this.dialogVisible = true;
      this.orderid = val;
      console.log(this.tableData[index].img);
      this.url = this.tableData[index].img;
    },
    chose() {
      this.drawer = false;
      this.render();
    },

    successfn(val) {
      this.orderid = val;
      this.drawer = true;
    },
    //
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //
    async myselftranslatefn(orderid, index) {
      let result = await myselftranslate({
        orderid,
      });
      if (result.code == 2000) {
        this.tableData.splice(index, 1);
      }
    },

    async changetstatus(orderid, status, index) {
      let result = await myselstatus({
        orderid,
        status,
      });
      if (result.code == 2000) {
        this.tableData[index].status = status;
      }
      // this.reset();
    },

    fn(val) {
      (this.page = val), this.render();
    },
    reset() {
      this.page = 1;
      this.render();
    },
    async render() {
      this.loading = true;
      let result = await Orderlist({
        page: this.page,
        size: this.size,
        orwhere: this.checkboxGroup1,
        keyword: this.keyword,
      });
      this.tableData = result.data;
      this.total = result.total;
      this.loading = false;
    },
  },
  async created() {
    console.log(this.$store);
    await this.render();
  },
};
</script>

<style lang="scss" scoped>
.grid {
  position: relative;
  display: grid;
  grid-template-columns: 100px 400px 200px;
  gap: 10px 30px;
}
.miana {
  position: relative;
  display: grid;
  height: 100%;
  grid-template-rows: 30px 1fr 30px;
  gap: 20px;
}
.box {
  position: absolute;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
